@extends('layouts.console_header')

@section('title', '上传app')

@section('resources')
    @parent
    <!-- css 文件 -->
    <style>
        .upload_app_content h2{color: #9955c6;margin: 20px 30px;}
        .upload_app_content ul{margin: 20px 60px;}
        .upload_app_content ul li{overflow: hidden;margin: 20px 0;}
        .upload_app_content ul li span{float: left;font-size: 18px;}
        .upload_app_content ul li select{float: left;border: 1px solid #000;margin-left: 56px;height: 22px;}
        .upload_app_content ul li input[type="file"]{float: left;margin-left: 56px;height: 22px;}
        .upload_app_content ul li input[type="button"]{float: left;margin-left: 20px;width: 70px;height: 22px;border-radius: 5px;background-color: #9955c6;color: #fff;}
        .upload_app_content ul li textarea{float: left;margin-left: 56px;border: 1px solid #000;width: 950px;height: 100px;padding: 5px;font-size: 14px;}
        .upload_app_content ul li .version_name{float: left;margin-left: 20px;border: 1px solid #000;width: 500px;height: 30px;font-size: 14px;padding: 0 5px;}
    </style>
@endsection

@section('content')
<!--  html内容  -->
<section class="user_list">
    <p class="fz_14 account_title">
        <span style="color: #7f7f7f;"><a href="/console/index">首页</a>>系统设置><a href="/console/system/app/version">app版本</a>></span><span class="co_violet">上传app</span>
    </p>
    <form action="/console/system/app/upload/submit" method="post" id="app_form" enctype="multipart/form-data">
        <section class="upload_app_content">
            <h2>app上传</h2>
            <ul>
                <input type="hidden" name="cityid" value="{{$cityid}}">
                <li>
                    <span>类型:</span>
                    <select name="type" id="app_type" onchange="appType()">
                        <option value="Andriod">Android</option>
                        <option value="iOS">iOS</option>
                    </select>
                </li>
                <li>
                    <span>版本名称:</span>
                    <input class="version_name" type="text" name="version_name" value="">
                </li>
                <li>
                    <span>版本号:</span>
                    <input class="version_name" type="text" name="version_code" value="">
                    <!-- <span id="version_code"></span> -->
                </li>
                <li id="file_list">
                    <span>文件:</span>
                    <input id="file" type="file" name="app_file" value="" onchange="uploadLogo(client);">
                    <div class="progress">
                        <div id="progress-bar"
                             class="progress-bar"
                             role="progressbar"
                             aria-valuenow="0"
                             aria-valuemin="0"
                             aria-valuemax="100" style="min-width: 1px;">
                            0%
                        </div>
                    </div>
                    <input type="hidden" name="url" value="">
                </li>
                <li>
                    <span>是否强制升级:</span>
                    <select style="width: 50px;" name="is_force" id="">
                        <option value="0">否</option>
                        <option value="1">是</option>
                    </select>
                </li>
                <li>
                    <span>描述:</span>
                    <textarea name="description" id="" cols="30" rows="10"></textarea>
                </li>
            </ul>
            <div style="width: 1110px;margin: 20px 10px;" class="oh">
                <input class="sure fr" type="submit" id="submit_app" style="background-color: #9955c6;" value="保存"/>
            </div>
        </section>
    </form>
</section>
@endsection

@section('scriptResources')
    @parent
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.3.0.min.js"></script>
<script>

    'use strict';
    var OSS = OSS.Wrapper;
    var STS = OSS.STS;
    var client = new OSS({
        region: 'oss-cn-beijing',
        accessKeyId: '{{$AccessKeyId}}',
        accessKeySecret: '{{$AccessKeySecret}}',
        stsToken: '{{$SecurityToken}}',
        bucket: 'fbw',
        secure: true
    });
    function appType(){
        if($("#app_type").val() == "Andriod"){
            $("#file_list").show();
        }else if($("#app_type").val() == "iOS"){
            $("#file_list").hide();
        }
    }
    var cityid='{{$cityid}}';
    //上传图片
    var progress = function (p) {
        return function (done) {
            var bar = document.getElementById('progress-bar');
            bar.style.width = Math.floor(p * 600) + 'px';
            bar.innerHTML = Math.floor(p * 100) + '%';
            bar.backgroundColor = '#000';
            done();
            console.log(p)
        }
    };
    var uploadLogo = function (client) {
        var versionCode = $('input[name="version_code"]').val();
        var filePath= "temp/app_" + versionCode + ".apk"; //文件路径：用户id＋时间戳
        var file = document.getElementById("file").files[0];
        var key = filePath;
        client.multipartUpload(key, file, {
            progress: progress
        }).then(function (res) {
            console.log('上传成功');
            console.log('key:'+ key);
            $("input[name='url']").val(key);
        });
    };
    $("#file").click(function(){
        var versionCode = $('input[name="version_code"]').val();
        if(versionCode == ''){
            alert("请填写版本号！");return false;
        }
    })
//    $("#submit_app").click(function() {
//        $.ajax({
//            url : "/console/system/app/upload/submit",
//            type : "post",
//            data : $('#app_form').serialize(),
//            dataType: "json",
//            async:true,
//            success:function (data){
//                if(data.status == 'success') {
//                    alert(data.message);
//                } else {
//                    alert(data.message);
//                }
//            }
//        });
//    });
</script>

@endsection